<template>
  <div>
    <BreadCrumbShow :pageTitle="pageTitle" />

    <div class="search-list">
      <div>
        <el-button v-if="commonFun.judgePower(1050200)" type="primary" size="small" @click="createDemand">
        <i class="el-icon-plus"></i> 创建需求</el-button>
      </div>

      <div class="search-right">
        <ExcelButton @outExcel="outExcel" :isExcelLoading='isExcelLoading' />
      </div>
    </div>

    <ElTable
      refName="demandList"
      @pageChange="pageChange"
      :data-source="demandList"
      :data-config="tableConfig"
      :total="total"
      :pageSize="pageSize"
      :pageNum="pageNum"
      :isLoading="isLoading"
    >
      <template #statusHeader>
        <div class="header-select">
          <el-select
            v-model="statusHeader"
            placeholder="状态"
            size="medium"
            @change="changeSelect"
            clearable
          >
            <el-option
              v-for="item in tableConfig.filter((e) => e.prop == 'status')[0]
                .selectOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </template>
      <template #subTypeHeader>
        <div class="header-select">
          <el-select
            v-model="subTypeHeader"
            placeholder="需求类型"
            size="medium"
            @change="changeSelect"
            clearable
          >
            <el-option
              v-for="item in tableConfig.filter((e) => e.prop == 'subType')[0]
                .selectOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </template>

      <template #subType="{ scope }">
        <div class="cell-popover" v-if="scope.row.subType == 8">
          <el-popover placement="top" width="170" trigger="hover">
            <div class="popover-inner">
              <div class="popover-item">
                <span class="popover-item-box">
                  <p class="popover-tit">操作方式：</p>
                  {{ scope.row.operationArea == 1 ? '库内操作' : scope.row.operationArea == 0 ? '网点上收' : ''}}
                </span>
              </div>
              <!-- 打包至线上注释，私有化展示, 淮安专有 -->
              <div class="popover-item" v-if="isPrivateLocal">
                <span class="popover-item-box">
                  <p class="popover-tit">核对与否：</p>
                  <i v-if="scope.row.isNeedCheck == 1" class="el-icon-check"></i>
                  <i v-if="scope.row.isNeedCheck == 0" class="el-icon-close"></i>
                </span>
              </div>
              <div class="popover-item" >
                <span class="popover-item-box">
                  <p class="popover-tit">云登记：</p>
                  <i v-if="scope.row.orderDemandAttrBean.isCloudReg == 1" class="el-icon-check"></i>
                  <i v-if="scope.row.orderDemandAttrBean.isCloudReg == 0" class="el-icon-close"></i>
                  <!-- {{ scope.row.orderDemandAttrBean.isCloudReg == 1 ? '是' : scope.row.orderDemandAttrBean.isCloudReg == 0 ? '否' : '' }}  -->
                </span>
              </div>
              <div class="popover-item" >
                <span class="popover-item-box">
                  <p class="popover-tit">装箱与否：</p>
                  <i v-if="scope.row.orderDemandAttrBean.isPacked == 1" class="el-icon-check"></i>
                  <i v-if="scope.row.orderDemandAttrBean.isPacked == 0" class="el-icon-close"></i>
                  <!-- {{ scope.row.orderDemandAttrBean.isPacked == 1 ? '是' : scope.row.orderDemandAttrBean.isPacked == 0 ? '否' : '' }}  -->
                </span>
              </div>
              <div class="popover-item" v-if="scope.row.orderDemandAttrBean.boxType == 5">
                <span class="popover-item-box">
                  <p class="popover-tit">容器：</p>
                  <i v-if="scope.row.isOnRack == 0" class="el-icon-check"></i>
                  <i v-if="scope.row.isOnRack == 1" class="el-icon-close"></i>
                  <!-- {{ scope.row.isOnRack == 1 ? '否' : scope.row.isOnRack == 0 ? '是' : '' }}  -->
                </span>
              </div>
            </div>
            <div slot="reference" class="popover-reference">
              <span>{{ commonFun.getLabel(demandSubType, scope.row.subType) }}</span>
            </div>
          </el-popover>
        </div>
        <div class="cell-popover" v-else-if="scope.row.subType == 7">
          <el-popover placement="top" width="170" trigger="hover">
            <div class="popover-inner">
              <div class="popover-item" >
                <span class="popover-item-box">
                  <p class="popover-tit">是否存证： </p>
                  <i v-if="scope.row.orderDemandAttrBean.isIotTrust == 1" class="el-icon-check"></i>
                  <i v-if="scope.row.orderDemandAttrBean.isIotTrust == 0" class="el-icon-close"></i>
                  <!-- {{ scope.row.orderDemandAttrBean.isIotTrust == 1 ? '是' : scope.row.orderDemandAttrBean.isIotTrust == 0 ? '否' : '' }}  -->
                </span>
              </div>
            </div>

            <div slot="reference" class="popover-reference">
              <span>{{ commonFun.getLabel(demandSubType, scope.row.subType) }}</span>
            </div>
          </el-popover>
        </div>
        <span v-else>{{ commonFun.getLabel(demandSubType, scope.row.subType) }}</span>
      </template>
      <template #boxType="{ scope }">
        <span>{{
          commonFun.getLabel(boxType, scope.row.orderDemandAttrBean.boxType)
        }}</span>
      </template>
      <template #boxAmount="{ scope }">
        <span>{{ scope.row.orderDemandAttrBean.boxAmount }}</span>
      </template>

      <template #contactName="{ scope }">
        <div class="cell-popover">
          <el-popover placement="top" width="250" trigger="hover">
            <div>
              <div class="popover-item">
                <i class="el-icon-user-solid"></i>
                <span>{{ scope.row.contactName }}</span>
              </div>
              <div class="popover-item">
                <i class="el-icon-location"></i>
                <span>
                  {{ scope.row.address ? scope.row.address : "无" }}
                </span>
              </div>
              <div class="popover-item">
                <i class="el-icon-phone"></i>
                <span>{{ commonFun.showSecretPhone(scope.row.contactMobile) }} </span>
              </div>
            </div>

            <div slot="reference" class="popover-reference">
              <i class="el-icon-user-solid"></i>
              <div class="name">
                {{ scope.row.contactName || "" }}
              </div>
            </div>
          </el-popover>
        </div>
      </template>

      <template #riseTime="{ scope }">
        <span>{{
          scope.row.orderDemandAttrBean &&
          scope.row.orderDemandAttrBean.riseTime
        }}</span>
      </template>

      <template #expectedTime="{ scope }">
        <span>{{
          scope.row.orderDemandAttrBean &&
          scope.row.orderDemandAttrBean.expectedTime
        }}</span>
      </template>

      <template #comments="{ scope }">
        <span>{{
          scope.row.orderDemandAttrBean &&
          scope.row.orderDemandAttrBean.comments
        }}</span>
      </template>

      <template #status="{ scope }">
        <span>{{ commonFun.getLabel(orderStatus, scope.row.status) }}</span>
      </template>

      <template #operate="{ scope }">
        <el-button size="mini" @click.native="showOperateLog(scope.row)"
          >操作记录</el-button
        >
        <!-- 登陆人是创建人可以看到签收按钮 -->
        <el-button size="mini" @click.native="goMobile(scope.row)" v-if="scope.row.subType == 7 && scope.row.status == 1 && scope.row.userId == userInfo.userId && scope.row.approvalEmptyBox == 1"
          >签收</el-button
        >
      </template>
    </ElTable>

    <!-- 申请 需求 弹框 -->
    <ApplyDemandDialog
      :isApplyDemand="isApplyDemand"
      :userInfo="userInfo"
      @closeApplyDialog="closeDialog"
      @getList="getDemandOrderList"
    />

    <OperateLog
      :logList="logList"
      :isLogShow="isLogShow"
      @closeApplyDialog="closeDialog"
    />
  </div>
</template>

<script>
import { boxType, orderStatus, demandSubType } from "@/utils/dictionary.js";
import ElTable from "@/components/table/ElTable.vue";
import ApplyDemandDialog from "./components/ApplyDemandDialog";
import OperateLog from "./components/OperateLog";
import ExcelButton from "@/components/public-style/ExcelButton";
import { getOrderList, getOrderListCount, getOrderLog } from "../../api/access-manage/index";

import Cookies from "js-cookie";
import axios from "axios";

export default {
  name: "demandList",
  components: {
    ElTable,
    ApplyDemandDialog,
    OperateLog,
    ExcelButton,
  },
  data() {
    return {
      isPrivateLocal: process.env.VUE_APP_LOCAL == 'huaian',
      boxType: boxType,
      orderStatus: orderStatus,
      demandSubType: demandSubType,
      logList: [],
      isLogShow: false,
      userInfo: {},

      pageTitle: "需求管理",
      demandList: [],
      tableConfig: [
        {
          label: "编号",
          prop: "id",
          width: 80,
        },
        {
          prop: "subType",
          label: "需求类型",
          selectOption: [
            { label: "空窍申请", value: "7" },
            { label: "空窍回收", value: "9" },
            { label: "档案上收", value: "8" },
          ],
          width: 120,
        },
        {
          prop: "boxType",
          label: "窍类型",
        },
        {
          prop: "boxAmount",
          label: "窍数量",
        },
        {
          prop: "contactName",
          label: "联系人",
          width: 120,
        },
        {
          prop: "expectedTime",
          label: "期望送达时间",
          width: 150,
        },
        {
          prop: "riseTime",
          label: "预计上收时间",
          width: 150,
        },
        {
          prop: "createdOn",
          label: "创建时间",
          width: 150,
        },
        {
          prop: "comments",
          label: "注意事项",
          width: 150,
        },
        {
          prop: "status",
          label: "状态",
          selectOption: [
            { label: "全部状态", value: undefined },
            { label: "待处理", value: "0" },
            { label: "处理中", value: "1" },
            { label: "已完成", value: "2" },
            { label: "已取消", value: "3" },
          ],
        },
        {
          prop: "operate",
          label: "操作",
          width: 170,
        },
      ],
      isLoading: false,
      total: 0,
      pageSize: 10,
      pageNum: 1,

      subTypeHeader: '',
      statusHeader: undefined,

      isApplyDemand: false,
      isClosePending: false,

      exportData: { type: 4 },
      isExcelLoading: false
    };
  },
  mounted() {
    this.userInfo = JSON.parse(Cookies.get("userInfo"));

    this.getDemandOrderList();
  },
  methods: {
    goMobile(row) {
      this.$router.push({
        path: `mobile/apply/empty?id=${row.id}&workerName=${row.contactName}`
      })
    },
    // 分页数据变动
    pageChange(emitData) {
      this.pageNum = emitData.pageNum;
      this.pageSize = emitData.pageSize;
      this.getDemandOrderList();
    },

    // 头部筛选项变化
    changeSelect() {
      this.pageNum = 1
      this.getDemandOrderList();
    },

    // 获得 需求订单列表
    getDemandOrderList() {
      // 0调阅 1回库 2销毁 3永久下架 4 需求
      let data = {
        type: 4,
        status: this.statusHeader ? this.statusHeader : undefined,
        subType: this.subTypeHeader ? this.subTypeHeader : undefined,
      };
      this.exportData = data;

      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      this.isLoading = true;
      new Promise((resolve) => {
        getOrderList(data, params)
          .then((res) => {
            res.data.map((e) => {
              e.createdOn = this.$moment(e.createdOn * 1000).format(
                "YYYY-MM-DD HH:mm:ss"
              );
              if (e.orderDemandAttrBean) {
              e.orderDemandAttrBean.riseTime =
                e.orderDemandAttrBean.riseTime &&
                this.$moment(e.orderDemandAttrBean.riseTime * 1000).format(
                  "YYYY-MM-DD"
                );
              e.orderDemandAttrBean.expectedTime =
                e.orderDemandAttrBean.expectedTime &&
                this.$moment(e.orderDemandAttrBean.expectedTime * 1000).format(
                  "YYYY-MM-DD"
                );
              } else {
                e.orderDemandAttrBean = {}
              }
            });
            this.demandList = res.data;
            // this.total = res.total;
            getOrderListCount(data, params).then(resm => {
              this.total = resm
            })

            this.isLoading = false;
          })
          .catch((err) => {
            this.isLoading = false;
          });
      });
    },

    // 关闭临时列表 提示
    toClosePending(data) {
      this.isClosePending = data;
    },
    // 查看操作记录
    showOperateLog(row) {
      // 查询当前需求订单的操作记录
      getOrderLog(row.id).then((res) => {
        res.data.map((e) => {
          e.timestamp = this.$moment(e.createdOn * 1000).format(
            "YYYY-MM-DD HH:mm:ss"
          );
          e.content = e.nodeName;
        });

        this.logList = res.data;
        this.isLogShow = true;
      });
    },

    // 创建需求
    createDemand() {
      this.isApplyDemand = true;
    },

    // 关闭 弹框
    closeDialog() {
      this.isApplyDemand = false;
      this.isLogShow = false;
    },

    outExcel() {
      this.isExcelLoading = true
      axios({
        headers: {
          Authorization: JSON.parse(Cookies.get("userInfo")).token,
        },
        url: "/api/business/order/export",
        method: "post",
        responseType: "blob", // 后台响应数据类型
        data: this.exportData,
      }).then((response) => {
        this.isExcelLoading = false
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement("a");
        let fname =
          "需求列表_" + this.$moment(new Date()).format("YYYY-MM-DD") + ".xlsx";
        link.href = url;
        link.setAttribute("download", fname);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.box-code {
  display: flex;
  align-items: center;
  .el-image-box {
    height: 60px;
    width: 80px;
    margin-right: 10px;
    text-align: center;
    .el-image {
      height: 100%;
    }
  }

  .title {
    color: #333;
    font-size: 12px;
    font-weight: 550;
  }
}
.img-box {
  display: flex;
  justify-content: center;
  align-items: center;

  img {
    width: 70%;
  }
}
.popover-inner {
  .el-icon-close {
    color: red;
    font-size: 17px;
  }
  .el-icon-check {
    color: green;
    font-size: 17px;
  }
  .popover-item-box {
    display: flex;
    align-items: center;
  }
  .popover-tit {
    width: 60px;
    // 文字两端对齐
    text-align: justify;
    text-justify: distribute-all-lines; // 这行必加，兼容ie浏览器
    text-align-last: justify;
  }
}
</style>

<style lang="scss" scoped>
.search-list {
  // margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  ::v-deep .el-form {
    flex: 1;
  }
  .form-inline {
    ::v-deep .el-form-item {
      margin-bottom: 0;
      width: 100%;
    }
    ::v-deep  .el-form-item__content {
      width: 40%;
    }

    ::v-deep  .el-input-group__append {
      color: #fff;
      background-color: #f88123;
    }
  }

  .search-right {
  }
}

.popover-item {
  line-height: 20px;
  font-size: 12px;
  padding-left: 10px;
  i {
    margin-right: 8px;
  }
}

.popover-reference {
  display: flex;
  align-items: center;
  // padding-left: 10px;
  .name {
    max-width: 70px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 5px;
  }
}
</style>
<style lang="scss">
.el-select {
  ::v-deep .el-select__tags {
    // 解决多个tag卡片溢出隐藏问题
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;

    .el-tag {
      // 注意这个inline-block 对卡片溢出隐藏很重要
      display: inline-block;

      // 解决单个tag文字过长溢出隐藏问题
      .el-select__tags-text {
        display: inline-block;
        max-width: 70px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .el-icon-close {
        top: -6px;
        right: -4px;
      }
    }
  }
}

.el-input-group__prepend {
  background-color: transparent;
}

</style>
